<!-- PurchaseItem.vue -->
<template>
    <el-table-column width="300">
        <template #header>
            <div class="flex-between">
                <span>药品信息</span>
                <el-button type="danger" size="small" @click="clearAll">清空</el-button>
            </div>
        </template>
        <template #default="{ row }">
            <el-select v-model="row.medicineId" filterable placeholder="搜索药品" @change="updateMedicine(row)">
                <el-option v-for="m in medicines" :key="m.id" :label="`${m.name} (${m.manufacturer})`" :value="m.id" />
            </el-select>
        </template>
    </el-table-column>

    <el-table-column label="单价" width="150">
        <template #default="{ row }">
            <el-input-number v-model="row.unitPrice" :min="0.01" :precision="2" />
        </template>
    </el-table-column>

    <el-table-column label="数量" width="150">
        <template #default="{ row }">
            <el-input-number v-model="row.quantity" :min="1" :step="10" />
        </template>
    </el-table-column>

    <el-table-column label="小计" width="150">
        <template #default="{ row }">
            {{ (row.unitPrice * row.quantity).toFixed(2) }}
        </template>
    </el-table-column>

    <el-table-column width="80">
        <template #default="{ $index }">
            <el-button type="danger" icon="Delete" circle @click="removeItem($index)" />
        </template>
    </el-table-column>
</template>

<script setup>
import { defineProps, emits } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    medicines: Array,
    onAdd: Function,
    onRemove: Function,
    onUpdate: Function,
    onClear: Function
})

const emit = emits(['add', 'remove', 'update', 'clear'])
</script>